<template>
  <div id="home">
    <home-nav-bar />
    <scroll ref="scroll" class="content">
      <home-city-positioning :city-positioning="cityPositioning" />
      <home-hot-cities :hot-cities="hotCities" />
      <home-all-cities :all-cities="allCities" />
    </scroll>
  </div>
</template>

<script>
import Scroll from "components/common/betterScroll/Scroll";

import HomeNavBar from "./childComps/HomeNavBar";
import HomeCityPositioning from "./childComps/HomeCityPositioning";
import HomeHotCities from "./childComps/HomeHotCities";
import HomeAllCities from "./childComps/HomeAllCities";

import { getHomeCity } from "network/home";
export default {
  data() {
    return {
      cityPositioning: {},
      hotCities: [],
      allCities: {},
    };
  },
  inject: ["reload"],
  created() {
    this.reload();
    this.getHomeCity("guess");
    this.getHomeCity("hot");
    this.getHomeCity("group");
  },
  mounted() {
    this.$refs.scroll.refresh();
  },
  methods: {
    getHomeCity(type) {
      getHomeCity(type).then((res) => {
        switch (type) {
          case "guess":
            this.cityPositioning = res;
            break;
          case "hot":
            this.hotCities = res;
            break;
          default:
            this.allCities = res;
            break;
        }
      });
    },
  },
  components: {
    Scroll,
    HomeNavBar,
    HomeCityPositioning,
    HomeHotCities,
    HomeAllCities,
  },
};
</script>
<style lang="less" scoped>
#home {
  position: relative;
  height: 100vh;
  background-color: #f5f5f5;
  z-index: 1;
  .content {
    height: calc(100% - 44px);
    overflow: hidden;
  }
}
</style>